<template>
  <div class="headers">
    <div class="headers-left">
      <div class="headers-left_img1">
        <img src="../../assets/img/logo.png" alt="" />
      </div>
      <div class="headers-left_img2">
        <img src="../../assets/img/logo2.png" alt="" />
      </div>
    </div>

    <div class="headers-right">
      <custom-menu
        :initial-active-index="activeIndex"
        @update:activeIndex="updateActiveIndex"
      />
    </div>
    <div class="headers-center">
      <div class="headers-center_left" @click="Search()">
        <div class="headers-center_left_input_img">
          <img src="../../assets/img/search.png" alt="" />
        </div>
      </div>
      <div class="headers-center_center">
        <div class="headers-center_center_photo" v-if="obj.userPhoto == ''">
          <img src="../../assets/img/photo.png" alt="" />
        </div>
        <div class="headers-center_center_photo" v-else>
          <img :src="portalPath+'/r' + obj.userPhoto.slice(1)" alt="" />
        </div>
    
      </div>
      <div class="headers-center_center_notice" @click="tonotice()">
        <i class="el-icon-message-solid"></i>
      </div>
      <div class="headers-center_right">
    
        <el-popover placement="bottom-start" width="350" trigger="click">
          <div class="loginbox">
            <div class="loginbox_top">
              <div class="loginbox_top_left">
                <div
                  class="headers-center_center_photo"
                  v-if="obj.userPhoto == ''"
                >
                  <img src="../../assets/img/photo.png" alt="" />
                </div>
                <div class="headers-center_center_photo" v-else>
                  <img :src="portalPath+ '/r' + obj.userPhoto.slice(1)" alt="" />
                </div>
                <div style="margin-top:30px;">
                  {{ obj.dept }} <span>({{ obj.position }})</span>
                </div>
              </div>
              <div class="loginbox_top_right">
                <div class="loginbox_top_right_detail">
                  <div>
                    {{ obj.userName }} <span>({{ obj.uid }})</span>
                  </div>
                
                </div>
             
                <div class="loginbox_top_right_name">
                  <div @click="changepwd()" class="loginbox_top_right_name_img">
                    <img
                      src="../../assets//img/pin4.png"
                      alt=""
                      style="width: 32px; height: 32px"
                    />
                    修改登录口令
                  </div>
                  <div @click="openDialog" class="loginbox_top_right_name_img">
                    <img
                      src="../../assets//img/pin3.png"
                      alt=""
                      style="width: 32px; height: 32px"
                    />
                    上传个人头像
                  </div>
                  <div @click="viewLogs" class="loginbox_top_right_name_img">
                    <img
                      src="../../assets//img/pin2.png"
                      alt=""
                      style="width: 32px; height: 32px"
                    />
                    查看登录日志
                  </div>
                  <div @click="windowprocesson()" class="loginbox_top_right_name_img">
                    <img
                      src="../../assets//img/pin1.png"
                      alt=""
                      style="width: 32px; height: 32px"
                    />
                    在线梳理流程
                  </div>
                </div>
              </div>
            </div>
            <div class="loginbox_bottom" @click="loginOut">
              <img
                src="../../assets//img/pin5.png"
                alt=""
                style="width: 32px; height: 32px"
              />
              退出
            </div>
          </div>
          <el-button
            slot="reference"
            style="border: none; background-color: transparent"
          >
            <span class="admin-title" style="cursor: pointer">{{
              obj.userName
            }}</span>
          </el-button>
        </el-popover>
        <!-- <el-dropdown trigger="click">
       
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="openDialog"
              >修改个人头像</el-dropdown-item
            >
            <el-dropdown-item @click.native="viewLogs"
              >查看登录日志</el-dropdown-item
            >
            <el-dropdown-item @click.native="loginOut"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown> -->
      </div>
      <el-dialog title="修改个人头像" :visible.sync="dialogVisible">
        <div class="upload-container">
          <el-upload
            class="upload-demo"
            drag
            :action="uploadUrl"
            :on-success="handleImageUpload"
            :before-upload="beforeUpload"
            :show-file-list="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              拖拽文件到此处，或<span class="upload-link">点击上传</span>
            </div>
          </el-upload>
          <el-image
            v-if="imageUrl"
            :src="portalPath+'/r/' + imageUrl.slice(1)"
            class="avatar-preview"
            fit="contain"
          ></el-image>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmUpload">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog :visible.sync="showModal" title="用户登录日志">
        <el-table :data="logList" border>
          <el-table-column prop="index" label="序号" width="80">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="登录时间"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="closeTime"
            label="离开时间"
            width="180"
          ></el-table-column>
          <el-table-column prop="ip" label="IP" width="150"></el-table-column>
        </el-table>

        <span slot="footer" class="dialog-footer">
          <el-button @click="closeModal">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>


<script>
// 全屏组件
import CustomMenu from "../CustomMenu/CustomMenu.vue"; // 确保路径正确
import { getNavbar } from "@/api/index";
import screenfull from "screenfull";
// import Clipboard from 'clipboard'
import { encrypt, decrypt } from "../../utils/jsencrypt";

// import { VueCropper } from "vue-cropper";

import github2 from "../../assets/icon/github2.svg"; //github
import screen from "../../assets/icon/screen.svg"; //全屏
import reduction from "../../assets/icon/reduction.svg"; //还原

export default {
  props: {
    asideShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    var oldPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("旧口令不能为空"));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新口令"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新口令"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入新口令不一致!"));
      } else {
        callback();
      }
    };
    return {
      portalPath:window.portalPath,
      baseUploadUrl: "", // 基础上传 URL
      dialogVisible: false, // 控制弹窗显示
      imageUrl: "", // 存储上传后图片的 URL
      activeIndex: "1",
      navList: {},
      dwshow: true,
      obj: {},
      boId: "",
      showModal: false,
      logList: [], // 用于存储登录日志数据
    };
  },
  computed: {
    uploadUrl() {
      return `${portalPath}/api/bonoFile/attachment/upfile/${window.sid}`; // 计算属性，构建上传 URL
    },
  },
  components: {
    github2,
    screen,
    reduction,
    CustomMenu,
  },
  inject: ["reload"],
  created() {
    // this.test = window.location.host;
    // this.sid2 = window.sid;
    this.getlist();
  },
  methods: {
    tonotice(){
      window.open(portalPath+'/r/w?sid='+ window.sid+'&cmd=com.actionsoft.apps.notification_center')
    },
    windowprocesson(){
      window.open('https://www.processon.com/')
    },
    changepwd(){
      window.open('http://pwd.bono.com.cn/iisadmpwd/')
    },
    loginOut() {},
    closeModal() {
      this.showModal = false;
      this.logList = []; // 关闭时重置日志数据
    },
    handleImageUpload(response, file) {
      this.imageUrl = response.data.imgPath; // 根据实际接口返回的 URL 设置

      this.boId = response.data.boId;
    },
    //获取人员信息
    getlist() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.getBasicInfo",
      };
      getNavbar(param).then((res) => {
   
        this.obj = res.data;
      });
    },
    Search() {
      this.$router.push({
        path: "",
        name: "search",
      });
    },
    handleCommand(command) {
 
    },
    updateActiveIndex(index) {
      this.activeIndex = index; // 更新父组件的选中项
    },
    openDialog() {
   
      this.dialogVisible = true; // 打开弹窗
    },
    viewLogs() {
      var param = {
        sid: window.sid,
        cmd: "com.actionsoft.apps.skins.metro_get_user_login_log",
      };
      getNavbar(param).then((res) => {
        this.logList = res.data.userLoginLog;
        this.showModal = true; // 打开弹窗
     
      });
    },
    handleSuccess(response, file) {
      // 处理上传成功的逻辑
      this.imageUrl = URL.createObjectURL(file.raw); // 显示上传的图片
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith("image/");
      if (!isImage) {
        this.$message.error("只能上传图片文件!");
      }
      return isImage; // 返回 true 允许上传，返回 false 阻止上传
    },
    confirmUpload() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.updUserPhoto",
        boId: this.boId,
      };
      getNavbar(param).then((res) => {
        
        if (res.result == "ok") {
          this.$message.success("头像已更新"); // 提交上传的逻辑
          this.dialogVisible = false; // 关闭弹窗
          this.getlist();
        }
      });
    },

    clickThreeLevel(lists) {

      if (lists.url === "/") {
        this.$router.push({
          path: "",
          name: "indexs",
        });
      } else {
        this.$router.push({
          path: "/iframe",
          query: {
            url: portalPath+"/r" + lists.url.replace(/sid=[\w\-\_]+/, "").slice(1),
          },
        });
      }
    },
    //回到首页
    toshouye() {
      this.$emit("headers", this.dwshow);
      let router_path = this.$route.path;

      if (router_path == "/") {
        this.reload();
      } else {
        this.$router.push("/");
      }
    },

    //个人密码弹窗
    updatePswPop() {
      this.updatePsw = true;
    },

    //顶部菜单
    handleSelect(key) {
      const listid = key;
  
      // var param={'sid':this.$sid,'cmd':'com.actionsoft.apps.skins.mportal_get_mportal_nav'}
      var param = { sid: window.sid, menuOrder: "1" };
      getNavbar(param).then((res) => {
        // console.log("瞅瞅我自己调了啥",res);
        const { result, msg, data, id } = res;
        if (result === "ok") {
      
          this.navLists = res.data;
          this.$store.commit("getmsg", this.navLists);
          // this.$emit('navChildEvent',item)
     
        }
      });
    },
    //退出提示
    loginOut() {
      // window.location.href="https://www.cnblogs.com/huifeidezhuzai/p/10334813.html"
      this.$confirm("此操作将退出该系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.quit();
          // this.$message({
          //   type: "success",
          //   message: "退出成功!",
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    toxiaoxi() {
 
    },
    // 自定义 切换 侧边栏 事件
    targetIcon() {
      this.$emit("targetIcon", !this.asideShow);
    },
    // 全屏
    buttoncli() {
      // if (!screenfull.enabled) { // 如果不允许进入全屏，发出不允许提示
      //     this.$message({
      //         message: '不支持全屏',
      //         type: 'warning'
      //     })
      //     return false
      // }
      screenfull.toggle();
      this.checkFull();
    },
    // 监控屏幕变化
    checkFull() {
      var isFull =
        document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
      // to fix : false || undefined == undefined
      // 是否全屏判断
      this.isFullscreen = !this.isFullscreen;
      if (this.isFullscreen) {
        this.$message({
          message: "全屏啦",
          type: "success",
        });
      } else {
        this.$message({
          message: "取消全屏",
          type: "warning",
        });
      }

      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },

    //点击退出登陆
    quit() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.userLogout",
      };
      getNavbar(param).then((res) => {
    

        if (res.result == "ok") {
          sessionStorage.removeItem("company");
          sessionStorage.removeItem("store");
          localStorage.removeItem("activeIndex");
          this.$message({
            message: "退出成功",
            type: "success",
          });

          window.location.href = res.data.portalUrl;
        }
      });
    },

    //获取用户个人信息
    init() {
      var param = { sid: window.sid };
      getuser(param).then((res) => {
        const { result, msg, data, id } = res;
 
        if (result == "ok") {
          this.users.username = data;
        }

        // console.log(this.users.username,'this.username')
      });
    },
    // 弹出框的关闭
    handleClose(done) {
      done();
    },
    //正则
    checkVal(value, type) {
      if (value == undefined) value = "";
      switch (type) {
        case "account":
          // 账号
          var re = /^[a-zA-z]\w{3,15}$/;
          if (re.test(value)) {
            return true;
          } else {
            return false;
          }
          break;
        case "name":
          // 姓名
          var re = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
          if (re.test(value)) {
            return true;
          } else {
            return false;
          }
          break;
        case "phone":
          //手机
          var re = /^1\d{10}$/;
          if (re.test(value)) {
            return true;
          } else {
            return false;
          }
          break;
        case "tel":
          // 电话
          var re = /^0\d{2,3}-?\d{7,8}$/;
          if (re.test(value)) {
            return true;
          } else {
            return false;
          }
          break;
        case "fax":
          // 传真
          var re = /^(\d{3,4}-)?\d{7,8}$/;
          if (re.test(value)) {
            return true;
          } else {
            return false;
          }
          break;
        case "mail":
          // 邮件
          var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
          if (re.test(value)) {
            return true;
          } else {
            return false;
          }
          break;
        case "special":
          // 特殊符号
          var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
            regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
          if (regEn.test(value) || regCn.test(value)) {
      
            return false;
          } else {
            return true;
          }
          break;
        case "password":
          // 密码
          var re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,16}$/;
          // /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?.!@$%^&*-]).{8,}$/;
          if (re.test(value)) {
            return true;
          } else {
            return false;
          }
          break;

        default:
          break;
      }
      return false;
    },

    // 修改登录口令的确定
    submitForm(formName, isBtn) {
      let a = encrypt(this.ruleForm.oldpsw);
      if (
        !this.ruleForm.pass ||
        !this.ruleForm.oldpsw ||
        !this.ruleForm.checkPass
      ) {
        this.$message("*必填项不能为空！");
        return;
      }

      if (!this.checkVal(this.ruleForm.pass, "password")) {
        this.$message("新口令密码格式不对！");
        return;
      }
      if (!this.checkVal(this.ruleForm.checkPass, "password")) {
        this.$message("确认口令密码格式不对！");
        return;
      }
      if (this.ruleForm.pass !== this.ruleForm.checkPass) {
        this.$message("新口令和确认口令不一致！");
        return;
      }

      if (isBtn !== undefined) {
        var param = {
          sid: window.sid,
          oldPwd: this.ruleForm.oldpsw,
          newPwd: this.ruleForm.pass,
        };
        updatePassword(param).then((res) => {
          const { result, msg, data, id } = res;
          if (result === "ok") {
            this.$message("修改成功");
            this.updatePsw = false;
           
          } else {
            this.$message(msg);
          }
        });
      } else {
        if (this.ruleForm.oldpsw === this.ruleForm.pass) {
          this.$refs[formName].resetFields();
          this.$message("新口令不能和旧口令一致！");
          // this.updatePsw=true
          this.forceChangePwd = true;
        } else {
          var param = {
            sid: window.sid,
            oldPwd: this.ruleForm.oldpsw,
            newPwd: this.ruleForm.pass,
          }; //com.actionsoft.apps.skins.mportal_update_userinfo
          // var param1={'oldPassword':encrypt(this.ruleForm.oldpsw),'password':encrypt(this.ruleForm.pass),'confirmPassword':encrypt(this.ruleForm.checkPass)}
          updatePassword(param).then((res) => {
            const { result, msg, data, id } = res;
            if (result === "ok") {
              this.$message("修改成功");
              this.updatePsw = false;
              this.forceChangePwd = false;
         
            } else {
              this.$message(msg);
            }
          });
        }
      }
    },

    // 展开通知
    dropShowBtn() {
      clearTimeout(this.setTime);
      this.dropShow = true;
    },
    // 收起通知
    dropHideBtn() {
      let This = this;

      this.setTime = setTimeout(function () {
        This.dropShow = false;
      }, 1000);
    },
    // 鼠标移入 通知栏
    dropdownBtn() {
      clearTimeout(this.setTime);
      this.dropShow = true;
    },
    // 选取配色方案
    targetThemeIndex(index) {
      this.$emit("targetThemeIndex", index);
    },
    // 去github
    goGithub() {
      window.open("https://github.com/cgq001/admin-menu/tree/2.0");
    },
  },
  mounted() {
    // 浏览器窗口改变事件
    this.isFullscreen = document.body.scrollHeight === window.screen.height;
  },
};
</script>

<style lang="scss"  >
.headers-center_center_notice{
  height: 77px;
  line-height: 84px;
}
.headers-center_center_notice i{
  font-size: 22px;
    color: #f3f3f3;
    cursor: pointer;
}
.headers-center_center_photo img {
  width: 120px;
  height: 120px;
}
.loginbox_bottom {
  display: flex;

  align-items: center;
  margin-top: 6px;
  cursor: pointer;
  color: #1397d4;
  font-size: 22px;
}
.loginbox_top_right_name_img {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 6px;
  cursor: pointer;
  color: #1397d4;
}
.loginbox_top {
  display: flex;
  justify-content: space-around;
}
.loginbox_top_right_detail {
  font-weight: 700;
  color: #333333;
  margin-bottom: 20px;
  font-size: 18px;
}
.avatar-preview {
  width: 120px;
  height: 120px;
}
.el-button--text {
  color: #57637a !important;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.jbtile {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
.header_pop_top {
  background: #f5f5f5;
  position: relative;
  border-radius: 4px;
  .header_pop_top_img {
    position: absolute;
    right: 57px;
    top: 51px;
    .header_pop_top_img_icon {
      width: 11px;
      height: 13px;
    }
  }
  .header_pop_top_name {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    /* margin: 12px 0 0 20px; */
    padding: 12px 0 0 20px;
  }
  .header_pop_top_id {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    padding: 17px 0 24px 20px;
  }
}
.jiben {
  margin-top: 20px;
  .jiben_one {
    margin-bottom: 20px;
    cursor: pointer;
    display: flex;
    .jiben_img {
      margin-left: 15px;
      .jiben_img_icon {
        width: 16px;
        height: 16px;
      }
    }
    .jiben_title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      margin-left: 20px;
    }
  }
}
.out {
  width: 80%;
  margin-left: 10%;
  cursor: pointer;
}
.out_title {
  font-size: 14px;
  padding: 7px 0;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  margin-bottom: 20px;

  text-align: center;

  background: #1397d4;
  border-radius: 4px;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  width: 100%;
}
.headers-right_center_img_icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.china {
  color: #666666;
  font-size: 14px;
  font-weight: 400;
}
.erweima {
  .erweima_one {
    margin-bottom: 10px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    font-size: 14px;
  }
  .erweima_two {
    text-align: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
}
.phonespops {
  padding: 0 !important;
}
.phonespop {
  width: 100px !important;
  min-width: 100px !important;
}
.headers {
  width: 100%;
  /* height: 100%; */
  // height: 100px;
  display: flex;

  align-items: center;
}
.header_logo_icon {
  width: 396px;
  height: 54px;
}
.headers_logo {
  position: absolute;
  top: 9px;
  left: 5px;
}
.headers-center_list {
  // margin-top: 10px;
}
.down_icon {
  width: 27px;
  height: 27px;
}
.headers-center_search {
  line-height: 60px;
}
.headers-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headers-center_left {
    width: 168px;
    height: 36px;
    /* background: #ffffff; */
    border-radius: 15px;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    margin-right: 15px;
  }
  .headers-center_left_input_img {
    position: absolute;
    right: 16px;

    width: 16px;
    height: 16px;
    top: 9px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .headers-center_center {
    margin-right: 10px;
    .headers-center_center_photo {
      width: 40px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .headers-center_right {
    span {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
    }
  }
}
.headers-right_center {
  display: flex;
  justify-content: space-around;
  position: relative;
  margin-right: 20px;
  line-height: 60px;
  .headers-right_center_img {
    border-radius: 50%;
    position: absolute;
    width: 35px;
    height: 35px;
    line-height: 80px;
    top: 30px;
    left: -47px;
    .headers-right_center_img_icon {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
  }

  .headers-right_center_name {
    color: #ffffff;
  }
  .headers-right_center_title {
    color: #ffffff;
    margin-left: 5px;
  }
}
.update-photo {
  .el-dialog__header {
    background: #4a5ca2;
  }
}
.update-updateUser {
  .el-dialog__header {
    background: #4a5ca2;
    .el-dialog__title {
      color: #ffffff;
    }
  }
  .el-dialog__body {
    .el-input {
      width: 400px;
    }
    .el-form-item__content {
      text-align: right;
    }
  }
}
.update-password {
  .el-dialog__header {
    background: #4a5ca2;
    .el-dialog__title {
      color: #ffffff;
    }
  }
  .demo-ruleForm {
    margin-top: 20px;
  }
  .el-dialog__body {
    .el-input {
      width: 400px;
    }

    .el-form-item__content {
      text-align: right;
    }
  }
}
.el-form-item__error {
  margin-top: -30px;
}
.uploadCon {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  .uploadImgDiv {
    width: 32%;
    height: 100%;
    display: inline-block;
    text-align: center;
    .selectPhoto {
      display: block;
      // width: 60px;
      // width: 30%;
      width: 100px;
      // height: 23px;
      height: 7%;
      // line-height: 23px;
      // line-height: 23px;
      margin: 34px 0px 20px 13px;
      background: #4a5ca2;
      border: 1px solid #4a5ca2;
      color: #ffffff;
    }
    .userimgdiv {
      width: 200px;
      height: 200px;
      overflow: hidden;
      background: chartreuse;
      margin-left: 14px;
    }
    .photoSpanCls {
      margin-top: 5px;
      display: inline-block;
      margin-left: 13px;
      color: rgb(174, 174, 174);
    }
  }
  .preview-outer {
    flex: 1;
    margin-left: 30px;
    .preview-title {
      font-size: 15px;
      font-weight: bold;
      display: block;
      margin-top: 44px;
    }
    .previewPanel {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 30px;
      .preview-container {
        width: 120px;
        height: 120px;
        overflow: hidden;
        margin: 21px 30px 0px 0px;
        display: block;
        background: cornflowerblue;
      }
      .preview-container2 {
        width: 120px;
        height: 120px;
        overflow: hidden;
        margin: 21px 0px 0px 30px;
        display: block;
        float: left;
        border-radius: 50%;
        background: cornflowerblue;
      }
    }
  }
}
.update-photo >>> .el-dialog__footer {
  text-align: right;
  .el-button--primary {
    border: 1px solid #009b52;
    color: #ffffff;
    background-color: #009b52;
    padding: 4px 20px 2px;
    border-radius: 0;
  }
}

.website-title {
  margin-left: 45px;
  line-height: 60px;
  color: #333333;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
.headers-left {
  display: flex;
  justify-content: flex-start;
}
.headers-left-box {
  transition: all 0.5s;
  transform-origin: center center;
  width: 20px;
  height: 100%;
  // margin-right: 15px;
}
.headers-left-active {
  // transform: rotate(180deg);
}
.el-icon-s-fold {
  width: 20px;
  height: 100%;
  line-height: 50px;
  font-size: 20px;
  cursor: pointer;
}
.el-breadcrumb {
  line-height: 50px;
}
.headers-right {
  /* width: 200px; */

  /* background: orchid; */
  display: flex;
  justify-content: space-around;
}
.headers-right-left {
  line-height: 52px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-right: 50px;
  font-size: 22px;
  cursor: pointer;
  position: relative;
}
.headers-right-left-screenIcon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  fill: currentColor;
  // color: #ffffff;
}
.headers-right-left-githubIcon {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  fill: currentColor;
  // color: #413a3f;
}
.header-right-dropdown {
  width: 300px;
  height: auto;
  position: absolute;
  right: 0;
  top: 60px;
  z-index: 2;
  background: #ffffff;
  /* padding: 5px 0; */
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
/* .head-news-icon{
    
} */
.head-screen {
  margin-right: 15px;
  transform: rotate(45deg);
}
.head-screen-news {
  margin-right: 15px;
}
.headers-right-right {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: -10px;
  color: #ffffff;
  // margin-right: 30px;
  .headers-right-right_out {
    .headers-right-right_out_icon {
      width: 22px;
      height: 22px;
    }
  }
}
.block {
  margin-right: 15px;
}
.el-dropdown-link {
  cursor: pointer;
}
.focusing {
  border: none !important;
}
/* 主题 */
.theme {
  height: 100vh;
  overflow: hidden;
}
.el-drawer__body {
  height: 100vh !important;
  overflow: hidden;
}
.theme-title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
  padding: 0 15px;
  border-bottom: 1px solid #dcdfe6;
}
.theme-title-box {
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: calc(100vh - 51px);
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  overflow: "-moz-scrollbars-none";
  scrollbar-width: none; /*  火狐   */
  background: #f5f7f9;
}
.theme-title-box::-webkit-scrollbar {
  display: none; /*  Chrome  */
  width: 0 !important ; /*  Chrome  */
}
.theme-title-box-list {
  width: 180px;
  height: 150px;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  background: #999999;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
  border: 5px solid transparent;
}
.theme-title-box-list-left {
  width: 30px;
  height: 120px;
}
.theme-title-box-list-right {
  flex: 1;
  height: 160px;
}
.theme-title-box-list-right-top {
  width: 100%;
  height: 20px;
  background: #ffffff;
}
.theme-title-box-list-right-bottom {
  width: 100%;
  height: 100px;
}
.theme-active {
  border: 5px solid #05da89;
}
</style>